<template>
  <div>
    <el-dialog
      center
      :title="isAdd ? '添加会员' : '编辑会员'"
      :visible.sync="isShow"
      :close-on-press-escape="false"
      :before-close="cancel"
    >
      <el-form :model="memberInfo" :rules="rules" ref="memberRef">
        <el-form-item prop="phone" label="手机号" :label-width="formLabelWidth">
          <el-input v-model="memberInfo.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="nickname"
          label="昵称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="memberInfo.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
          <el-input v-model="memberInfo.password" autocomplete="off"></el-input>
        </el-form-item>
        <p>密码为空，则不做修改</p>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="memberInfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="comfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//引入封装好的接口
import { memberinfo, memberedit } from "../../request/api";
export default {
  props: ["isShow", "isAdd"],
  data() {
    return {
      memberInfo: {
        uid: "",
        nickname: "",
        phone: "",
        password: "",
        status: 1,
      },
      formLabelWidth: "120px",
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 0, max: 11, message: "格式不正确", trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 15 个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},

  methods: {
    //封装一个函数用来数据回显
    async lookup(uid) {
      console.log(uid);
     let res = await memberinfo({uid})
     console.log(res);
     this.memberInfo = res.list
     //注意： 如果密码为空则不做修改
     this.memberInfo.password =''
     this.memberInfo.uid = uid

    },
    //封装一个取消事件
    cancel() {
      this.$emit("cancel", false);
      //并清空
      this.reset();
    },
     //封装一个重置事件
     reset() {
      this.memberInfo = {
        uid: "",
        nickname: "",
        phone: "",
        password: "",
        status: 1,
      };
      //清空表单验证
      this.$refs.memberRef.resetFields();
    },
    //封装一个确定事件
    comfirm() {
     this.$refs.memberRef.validate((val) => {
      let _this = this;
        if (val) {
          console.log(this);
            memberedit(_this.memberInfo).then((res) => {
          
              if (res.code === 200) {
                this.$message.success(res.msg);
                this.cancel();
                // 重新触发行动
                this.$store.dispatch("member/getMemberAction");
              } else {
                this.$message.error(res.msg);
              }
            });
        }
      });
    },
  },
};
</script>

<style>
</style> 